<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-date-picker
					class="x_soso"
					v-model="valueDate"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
				<!-- <el-date-picker class="x_soso" v-model="search.payBTime" type="date" value-format="yyyy-MM-dd" placeholder="起始时间"></el-date-picker>
				<el-date-picker class="x_soso" v-model="search.EndTime" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker> -->
				<el-input class="x_soso" v-model="search.searchInput" placeholder="请输入商品名称搜索"></el-input>
				<el-button type="primary" @click="searchList">查询</el-button>
			</div>
			<div style="text-align: left;">
				<el-button type="primary" @click="refushData">刷新</el-button>
				<el-button type="primary" @click="addColumnClick">
					<i class="el-icon-plus"></i>
					添加商品
				</el-button>
			</div>
			<div style="clear:both"></div>
			<div class="commodity_box">
				<div class="commodity_type" v-for="(item, index) in tableData" :key="index">
					<img :src="item.itemImg" alt="" />
					<div class="introduce">
						<div class="introduce_nav">{{ item.itemName }}</div>
						<div class="introduce_type">{{ item.itemLabel }}</div>
						<div class="introduce_word">类型:抗衰</div>
					</div>
					<div class="price">
						<div class="current_price">￥{{ item.sellPrice }}</div>
						<div class="original_cost">原价￥{{ item.itemPrice }}</div>
					</div>
				</div>
			</div>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination
					background
					@current-change="columnFind"
					:current-page="page"
					:page-size="10"
					layout="prev, pager, next, jumper, total"
					:total="totalRecord"
				></el-pagination>
			</div>
		</el-card>
		<el-dialog :title="cname" :visible.sync="dialogVisible" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm" ref="ruleForm" label-width="160px" class="demo-ruleForm">
				<el-form-item label="商品名称"><el-input v-model="ruleForm.itemName" placeholder="商品名称" style="width: 90%;" maxlength="20"></el-input></el-form-item>
				<el-form-item label="商品类型" style="text-align: left;">
					<div style="margin-left: 30px;">{{ itemLabel }}</div>
				</el-form-item>
				<el-form-item label="商品标签"><el-input v-model="ruleForm.itemLabel" placeholder="商品标签" style="width: 90%;" maxlength="20"></el-input></el-form-item>
				<el-form-item label="商品售价"><el-input v-model="ruleForm.sellPrice" placeholder="商品售价" type="number" min="0" style="width: 90%;" maxlength="15"></el-input></el-form-item>
				<el-form-item label="商品原价"><el-input v-model="ruleForm.itemPrice" placeholder="商品原价" type="number" min="0" style="width: 90%;" maxlength="15"></el-input></el-form-item>

				<el-form-item label="商品主图上传" class="dislog_item">
					<el-upload
						class="avatar-uploader"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					>
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="商品详情图上传" prop="name">
					<el-upload
						class="avatar-uploader"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="false"
						:on-success="handleAvatarSuccess1"
						:before-upload="beforeAvatarUpload1"
					>
						<img v-if="imageUrlZuo" :src="imageUrlZuo" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="商品状态">
					<el-select filterable v-model="shopStatus" style="width: 90%;" placeholder="选择商品状态">
						<el-option v-for="(item, index) in shopStatusList" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Cookie from 'js-cookie';
import { getManagerGoodsList, addGoodsList } from '../../../server/index'; //接口
export default {
	inject: ['reload'],
	data() {
		return {
			valueDate: [],
			loading: true,
			tableData: [],
			ruleForm: {},
			cname: '添加供应商',
			search: {},
			switchVal: true,
			searchInput: '',
			page: 1,
			dialogVisible: false,
			totalRecord: '',
			imageUrl: '',
			imageUrlZuo: '',
			itemLabel: '抗衰',
			shopStatusList: [
				{
					id: '5',
					name: '上架'
				},
				{
					id: '6',
					name: '下架'
				}
			],
			shopStatus: ''
		};
	},
	mounted() {
		var page = 1;
		this.columnFind(page);
		Cookie.remove('tabList');
	},
	methods: {
		searchList() {
			this.columnFind(1);
		},
		refushData() {
			this.reload();
		},
		columnFind(page) {
			const _this = this;
			_this.page = page;
			_this.loading = false;
			let startTime = _this.valueDate[0];
			let endTime = _this.valueDate[1];
			let obj = {
				page: _this.page,
				rows: 10,
				startCreateTime: undefined == startTime ? '' : startTime,
				endCreateTime: undefined == endTime ? '' : endTime,
				keyword: undefined == _this.search.searchInput ? '' : _this.search.searchInput
			};
			_this.http.request({
				url: getManagerGoodsList,
				data: obj,
				success: function(res) {
					_this.totalRecord = res.totalRecord;
					_this.tableData = res.getManagerGoodsDTOList;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 主图
		handleAvatarSuccess(res, file) {
			// console.log(file);
			this.imageUrl = file.response.data.imgUrl;
		},
		beforeAvatarUpload(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		// 详情图
		handleAvatarSuccess1(res, file) {
			this.imageUrlZuo = file.response.data.imgUrl;
		},
		beforeAvatarUpload1(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		addColumnClick() {
			this.ruleForm = {};
			this.dialogVisible = true;
			this.cname = '添加商品';
		},
		cellClick() {
			const _this = this;
			_this.cname = '添加商品';
			_this.dialogVisible = true;
		},
		submitForm() {
			const _this = this;
			if (!_this.ruleForm.itemName) {
				_this.$message({
					offset: '200',
					message: '请输入商品名称'
				});
				return;
			}
			if (!_this.ruleForm.itemLabel) {
				_this.$message({
					offset: '200',
					message: '请输入商品标签'
				});
				return;
			}
			if (!_this.ruleForm.sellPrice) {
				_this.$message({
					offset: '200',
					message: '请输入商品售价'
				});
				return;
			}
			if (!_this.ruleForm.itemPrice) {
				_this.$message({
					offset: '200',
					message: '请输入商品原价'
				});
				return;
			}
			if (!_this.imageUrl) {
				_this.$message({
					offset: '200',
					message: '请上传商品主图'
				});
				return;
			}
			if (!_this.imageUrlZuo) {
				_this.$message({
					offset: '200',
					message: '请上传商品详情图'
				});
				return;
			}
			if (!_this.shopStatus) {
				_this.$message({
					offset: '200',
					message: '请选择商品状态'
				});
				return;
			}
			let dataMsg = {
				itemName: _this.ruleForm.itemName,
				itemImgPack: _this.imageUrlZuo,
				itemPrice: _this.ruleForm.itemPrice,
				itemStatus: _this.shopStatus,
				sellPrice: _this.ruleForm.sellPrice,
				itemImg: _this.imageUrl,
				itemLabel: _this.ruleForm.itemLabel
			};
			_this.http.request({
				url: addGoodsList,
				data: dataMsg,
				headers: {
					'Content-Type': 'application/json'
				},
				dataType: 'json',
				success: function() {
					_this.dialogVisible = false;
					_this.reload();
				},
				// error: function(err) {
				// 	_this.$message({
				// 		offset: '200px',
				// 		message: err.msg
				// 	});
				// }
			});
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.el-button--primary {
	background: rgba(113, 106, 202, 1);
	border: none;
}
.avatar-uploader-icon {
	border: 1px dashed #d9d9d9;
}
.el-button--primary:hover {
	color: #606266;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(113, 106, 202, 1);
}

.el-dialog {
	width: 600px !important;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.el-form-item__label {
	width: 120px !important;
}

.commodity_box {
	display: flex;
	padding: 10px;
	box-sizing: border-box;
	margin-top: 20px;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.commodity_type {
	width: 235px;
	height: auto;
	display: flex;
	border: 1px solid #dadadb;
	flex-direction: column;
	margin-right: 20px;
	margin-bottom: 20px;
}

.commodity_type img {
	width: 235px;
	height: 235px;
}

.introduce {
	padding: 10px;
	box-sizing: border-box;
	border-bottom: 1px solid #dadadb;
	display: flex;
	flex-direction: column;
}

.introduce_nav {
	color: rgba(0, 0, 0, 0.87);
	font-size: 18px;
	text-align: left;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	height: 24px;
}

.introduce_type {
	color: rgba(0, 0, 0, 0.8);
	font-size: 14px;
	text-align: left;
}

.introduce_word {
	color: rgba(0, 0, 0, 0.4);
	font-size: 12px;
	text-align: left;
}

.price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	box-sizing: border-box;
}

.current_price {
	color: rgba(244, 81, 108, 1);
	font-size: 18px;
}

.original_cost {
	color: rgba(0, 0, 0, 0.4);
	font-size: 13px;
}
</style>
